<template>
  <div>
    <Popup v-model="dshowPopup" style="height:100vh;" position="top">
      <h1>many2one</h1>
      <div v-for="item in allRecord">
        <Cell :title="item.value.display_name" @click="onchecked(item)"/>
      </div>
      <Button @click="showNew=true">新建</Button>
      <Button>清除</Button>
      <Button @click="$emit('update:showPopup',false)">取消</Button>
    </Popup>
    <NewForm :value.sync="showNew" :model="field.relation"></NewForm>
  </div>
</template>

<script>
  import gql from 'graphql-tag'
  import {ActionSheet, Button, Cell, Popup} from 'vant';
  import NewForm from "./NewForm";

  export default {
    name: 'Many',
    components: {NewForm, ActionSheet, Cell, Popup, Button},
    props: {
      field: {
        type: Object,
        default() {
          return {}
        }
      },
      model: {type: String, default: ''},
      id: {type: Number, default: 0},
      ids: {
        type: Array, default() {
          return []
        }
      },
      type: {type: String, default: 'many2one'},
      showPopup: {type: Boolean, default: false}
    },
    data: function () {
      return {
        searchText: '',
        tablePage: {
          currentPage: 1,
          pageSize: 10
        },
        order: '',
        domain: [],
        allRecord: [],
        showNew: false, dshowPopup: this.showPopup
      }
    },
    watch: {
      showPopup(to, from) {
        this.dshowPopup = to
      }
    },
    computed: {
      writeDict() {
        let v = {}
        v[this.field.name] = this.newval
        return v
      }
    },
    apollo: {
      allRecord: {
        query: gql`query qdv($model:String,$domain:String!,$queryFields:[String],$order:String,$limit:Int,$offset:Int){
                   allRecord:allRecord(model:$model,domain:$domain,fields:$queryFields,order:$order,limit:$limit,offset:$offset){
            value
          }
         }`,
        variables() {
          return {
            model: this.field.relation,
            domain: JSON.stringify(this.domain),
            offset: ((this.tablePage.currentPage - 1) * this.tablePage.pageSize) || 0,
            order: this.order,
            limit: this.tablePage.pageSize,
            queryFields: ['id', 'display_name']
          }
        },
        skip() {
          return !(this.field.relation)
        }
      }
    },
    mounted: function () {
      // this.getNewData()
    },
    methods: {
      extend: function (obj, src) {
        for (var key in src) {
          if (src.hasOwnProperty(key)) obj[key] = src[key]
        }
        return obj
      },
      onchecked: function (item) {
        let self = this
        self.$parent.onchange(item)
      },
      show: function () {
        this.getNewData()
      },
      onSubmit: function (txt) {
        // this.getNewData()
      },
      getNewData: function () {
        this.domain = [["name", "ilike", this.searchText]]  //JSON.parse( this.field.domain).append 字符串
      }
    }
  }
</script>

<style type="less">
  .flex {
    display: flex;
  }

  .vux-popup-radio-popup {
    background-color: #fff;
  }
</style>
